<!--
 * @description  : 市管-卷烟列表选择
 * @descriptionDetail: 市管-卷烟列表选择
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-07-26 15:57:44
-->
<template>
	<view class="page">
		<!-- #ifdef H5-ONLY -->
		<theme-navbar :isWhite="false" :customBack="handlerBack" title="卷烟选择">
			<view class="nav-right-icon">
				<u-icon name="scan" color="#ffffff" size="48" @click="scanClick"></u-icon>
			</view>
		</theme-navbar>
		<!-- #endif -->
		<!-- #ifdef H5-WECHAT || H5-EMP -->
		 <fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
		<view>
      <view class="u-search-btn u-border-bottom">
        <u-search
          shape="round"
          :clearabled="true"
          :showAction="true"
          actionText="确定"
          :animation="true"
          bg-color="#FFF"
          placeholder="请输入卷烟名称、编码"
          v-model="searchKey"
          @custom="queryData"
        ></u-search>
      </view>
      <!-- 上拉加载 下拉刷新 -->
      <view class="u-cig-content">
        <me-table
          :i="1"
          :index="0"
          :load-data="loadCigData"
          :init-load="true"
          :noMoreSize="0"
          ref="mescrollItem1"
        >
          <view class="u-title-style" slot-scope="d" @click="toSelCigAdd(d.data)">
            <view class="cig-title cig-text">
              {{ d.data.productName }}
            </view>
            <view class="cig-text">
              卷烟条码：{{ d.data.packCode }}
            </view>
          </view>
        </me-table>
      </view>
    </view>
    <u-popup mode="bottom" height="100%" border-radius="16" v-model="cigarOpen">
      <add-cigar :cigarData="cigarInfo" @back="handlerBack"></add-cigar>
    </u-popup>
  </view>
</template>

<script>
	import addCigar from './addCigar.vue';
	import meTable from '@/components/me-table.vue'
	import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
	import commonService from "@/service/common/common.service.js";
	import fabButton from '@/components/uni-fab.vue';

	export default {
		components: {
			meTable,
			addCigar,
			fabButton
		},
		mixins: [MescrollMoreMixin, ],
		data() {
			return {
				searchKey: '',
				cigarOpen: false,
				cigarInfo: {}, // 卷烟信息
				fContent: [{
					iconPath: require('@/static/scode.png'),
					selectedIconPath: require('@/static/scode.png'),
					text: '扫一扫',
					active: false,
				}],
			}
		},
		methods: {
			setRightBtns() {
				// 设置右侧标题
				let self = this;
				// #ifdef H5-DINGDING
				this.$deviceApi.setRight("扫一扫", () => {
					self.scanClick();
					self.setRightBtns();
				}, true, true);
				// #endif
			},
			fabtrigger(btn) {
				if (btn.index == 0) {
					this.scanClick();
				}
			},
			scanClick() {
				// #ifdef H5-DINGDING || H5-WECHAT
				this.$deviceApi.barCode().then(res => {
					this.searchKey = res;
					this.$refs["mescrollItem1"].refresh();
				}).catch(err => {
					this.$u.toast('扫描失败');
				});
				// #endif
			},
			// 调用后台接口查询数据：分页参数page.size, page.num
			loadCigData(page) {
				return commonService.getCigarList(page.num, page.size, {
					cigaName: this.searchKey,
				});
			},
			toSelCigAdd(item) {
				this.cigarInfo = this.$u.deepClone(item);
				this.cigarOpen = true;
			},
			queryData() {
				this.$refs["mescrollItem1"].refresh();
			},
			handlerBack(cig) {
				this.$emit("back", cig);
			},
		},
	}
</script>

<style lang="scss" scoped>
	uni-page-body {
		min-height: 100%;
		background: #f4f4f5;
	}

	.nav-right-icon {
		margin-right: 30rpx;
	}

	.u-search-btn {
		background-color: #f4f4f5;
		position: fixed;
		//top: 44px;
		z-index: 999;
		width: 100%;
		height: 44px;
		line-height: 44px;
		padding: 0 10px;
		display: flex;
		align-items: center;

		.u-confirm-btn {
			height: 32px;
			margin-left: 10px;
		}
	}

	.u-cig-content {
		//margin-top:44px;
		background-color: #f4f4f5;
		position: relative;
		top: 44px;
	}

	.u-title-style {
		background: #fff;
		margin: 10px;
		border-radius: 5px;

		.cig-title {
			color: #f2a051;
			border-bottom: 1px solid #e1e1e1;
		}

		.cig-text {
			font-size: 15px;
			padding: 10px;
		}
	}
</style>
